/* 
    运动函数： 有3个参数
    参数1：dom元素 参加动画元素
    参数2：一个对象，这个元素什么属性参加动画
    参数3：一个回调函数
*/
function move(ele, obj, callback) {

  let timerLen = 0;
  for (let key in obj) {
    timerLen++
    let speed;
    clearInterval(ele[key])
    // 给这个对象添加一个 left 属性，属性值为 一个定时器的空间地址
    ele[key] = setInterval(() => {
      let style;
      // 0-1 *100 == 0-100   0.1*100 = 10
      if (key === 'opacity') {
        style = getStyle(ele, key) * 100;
      } else {
        style = parseInt(getStyle(ele, key));
      }
      // 0 - 4 = -4/5 = -0.8 向上取整 = 0
      speed = (obj[key] - style) / 5;

      // 如果计算出来的 speed 大于0 向上取整，如果小于0就向下取整
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      style = style + speed;
      if (style === obj[key]) {
        clearInterval(ele[key]);
        timerLen--;
        if (timerLen === 0) {
          // 短路运算 如果有callback 就执行callback，没有就不执行
          callback && callback();
        }
      }
      if (key === 'opacity') {
        ele.style[key] = style / 100;
      } else {
        ele.style[key] = style + 'px';
      }
      // 当时间 为60的时候，30次 1800毫秒 才能把内层的定时器执行完成
      // 外层的定时器 是1300毫秒执行一次，会造成的问题就是 内层的定时器还没有执行完成 外层定时器有重新执行了
    }, 30)
  }

}